<template>
	<div class="Abusbar220IntervalGraph" v-if="pageData" @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu">
		<ScaleBox :width="2200">
			<MonitorHeader :title="$route.query.ftName">
			  <template v-slot:btns>
					<button @click="routerToIndexPage">画面索引</button>
			    <button @click="routerToMainPage">主接线图</button>
			    <button @click="clearAll($route.query.ftName)">画面清闪</button>
			  </template>
			</MonitorHeader>
			<div class="wrapper" ref="page">
				<div class="ctn">
					<div class="leftCtn">
						<div class="topTitle">
							<p>BP-2C A套保护</p>
						</div>
						<div class="leftWrapper">
							<div class="leftWrapper_left">
								<div class="leftWrapper_leftTop">
									<div class="leftWrapper_leftTop_left">
										<p>硬压板</p>
										<ul class="itemGroup">
											<li v-for="(item, index) in pageData['BP-2C A套保护'].slice(0,2)" :key="index">
												<div class="icon" style="cursor: pointer;"><YingYaBan :info="item" :state="Number(item.state_val)"></YingYaBan></div>
												<p>{{item.state_desc}}</p>
											</li>
										</ul>
									</div>
									<div class="leftWrapper_leftTop_mid">
										<p>复归信号</p>
										<ul>
											<li v-for="(item, index) in pageData['BP-2C A套保护'].slice(2,3)" :key="index">
												<div><el-button type="primary"></el-button></div>
											</li>
										</ul>
									</div>
									<div class="leftWrapper_leftTop_right">
										<p>通讯状态</p>
										<div class="inner">
											<div class="innerLeft"><span>"</span></div>
											<div class="innerRight">
												<div class="AB">
													<div class="A">
														<p>A</p>
														<div class="imgBox">
															<net-state :info="pageData['BP-2C A套保护'][3]" :state="pageData['BP-2C A套保护'][3].state_val"></net-state>
														</div>
													</div>
													<div class="B">
														<p>B</p>
														<div class="imgBox">
															<net-state :info="pageData['BP-2C A套保护'][4]" :state="pageData['BP-2C A套保护'][4].state_val"></net-state>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="leftWrapper_leftBtm">
									<p>软压板</p>
									<div class="rightCtnWrapper">
										<ul class="wrpperLeft">
											<li v-for="(item, index) in pageData['BP-2C A套保护'].filter(item => item.type=='软压板').slice(0,18)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
												<div class="svgBox" style="cursor: pointer;">
													<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
												</div>
												<!-- <p>{{item.state_desc}}</p> -->
											</li>
										</ul>
										<ul class="wrpperRight">
											<li v-for="(item, index) in pageData['BP-2C A套保护'].filter(item => item.type=='软压板').slice(18)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
												<div class="svgBox" style="cursor: pointer;">
													<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
												</div>
												<!-- <p>{{item.state_desc}}</p> -->
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="leftWrapper_right">
								<p>光字信号</p>
								<div class="leftBtn_leftBtm_btm">
									<div class="leftBtn_leftBtm_btmLeft">
										<ul>
											<li v-for="(item, index) in pageData['BP-2C A套保护'].filter(item => item.type == '光字牌').slice(0, 20)" :key="index">
												<GuangZiPai :info="item" :isClear="+item.is_clear" :jianGeMing="item.jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
											</li>
										</ul>
									</div>
									<div class="leftBtn_leftBtm_btmRight">
										<ul>
											<li v-for="(item, index) in pageData['BP-2C A套保护'].filter(item => item.type == '光字牌').slice(20)" :key="index">
												<GuangZiPai :info="item" :isClear="+item.is_clear" :jianGeMing="item.jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="rightCtn">
						<div class="topTitle">
							<p>PCS-915 B套保护</p>
						</div>
						<div class="rightWrapper">
							<div class="rightWrapper_left">
								<div class="leftWrapper_leftTop">
									<div class="leftWrapper_leftTop_left">
										<p>硬压板</p>
										<ul class="itemGroup">
											<li v-for="(item, index) in pageData['PCS-915 B套保护'].slice(0,2)" :key="index">
												<div class="icon"><YingYaBan :info="item" :state="Number(item.state_val)"></YingYaBan></div>
												<p>{{item.state_desc}}</p>
											</li>
										</ul>
									</div>
									<div class="leftWrapper_leftTop_mid">
										<p>复归信号</p>
										<ul>
											<li v-for="(item, index) in pageData['PCS-915 B套保护'].slice(2,3)" :key="index">
												<div><el-button type="primary"></el-button></div>
											</li>
										</ul>
									</div>
									<div class="leftWrapper_leftTop_right">
										<p>通讯状态</p>
										<div class="inner">
											<div class="innerLeft"><span>"</span></div>
											<div class="innerRight">
												<div class="AB">
													<div class="A">
														<p>A</p>
														<div class="imgBox">
															<net-state :info="pageData['PCS-915 B套保护'][3]" :state="pageData['PCS-915 B套保护'][3].state_val"></net-state>
														</div>
													</div>
													<div class="B">
														<p>B</p>
														<div class="imgBox">
															<net-state :info="pageData['PCS-915 B套保护'][4]" :state="pageData['PCS-915 B套保护'][4].state_val"></net-state>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="leftWrapper_leftBtm">
									<p>软压板</p>
									<div class="rightCtnWrapper">
										<ul class="wrpperLeft">
											<li v-for="(item, index) in pageData['PCS-915 B套保护'].filter(item => item.type=='软压板').slice(0,18)" :key="index"  @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
												<div class="svgBox" style="cursor: pointer;">
													<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
												</div>
												<!-- <p>{{item.state_desc}}</p> -->
											</li>
										</ul>
										<ul class="wrpperRight">
											<li v-for="(item, index) in pageData['PCS-915 B套保护'].filter(item => item.type=='软压板').slice(18)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
												<div class="svgBox" style="cursor: pointer;">
													<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
												</div>
												<!-- <p>{{item.state_desc}}</p> -->
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="rightWrapper_right">
								<p>光字信号</p>
								<div class="leftBtn_leftBtm_btm">
									<div class="leftBtn_leftBtm_btmLeft">
										<ul>
											<li v-for="(item, index) in pageData['PCS-915 B套保护'].filter(item => item.type == '光字牌').slice(0, 23)" :key="index">
												<GuangZiPai :info="item" :isClear="+item.is_clear" :jianGeMing="item.jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
											</li>
										</ul>
									</div>
									<div class="leftBtn_leftBtm_btmRight">
										<ul>
											<li v-for="(item, index) in pageData['PCS-915 B套保护'].filter(item => item.type == '光字牌').slice(23)" :key="index">
												<GuangZiPai :info="item" :isClear="+item.is_clear" :jianGeMing="item.jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</ScaleBox>
		<!-- ---------------------------------------------- -->
		<rightClickmenuList
		  v-if="rightMenuObj && showMenu"
		  :right-menu-obj="rightMenuObj"
		  @menuItemClick="menuItemClick"
		/>
		<el-dialog
		  custom-class="yaokongPersonDialog"
		  :visible.sync="operatorPwdDialogVisible_0"
		  width="22%"
		  :close-on-click-modal="false"
		>
		  <p slot="title" class="el-dialog__title">操作人</p>
		  <div class="operatorPwd">
		    <div class="operator">
		      <label>请输入操作人</label>
		      <el-select
		        size="small"
		        v-model="operatorPwdObj.username"
		        style="width: 16rem"
		      >
		        <el-option
		          v-for="(item, index) in userInfoJson.operatorList"
		          :key="index"
		          :label="item.username"
		          :value="item.username"
		        />
		      </el-select>
		    </div>
		    <div class="pwd">
		      <label>请输入密码</label>
		      <el-input
		        v-model="operatorPwdObj.pwd"
		        size="small"
		        type="password"
		        @keydown.enter.native="operatorPwdSubmit_0"
		      />
		    </div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
		    <el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  custom-class="yaokongPersonDialog"
		  :visible.sync="operatorPwdDialogVisible"
		  width="22%"
		  :close-on-click-modal="false"
		>
		  <p slot="title" class="el-dialog__title">监护人</p>
		  <div class="operatorPwd">
		    <div class="operator">
		      <label>请输入监护人</label>
		      <el-select
		        size="small"
		        v-model="adminPwdObj.username"
		        style="width: 16rem"
		      >
		        <el-option
		          v-for="(item, index) in userInfoJson.adminList"
		          :key="index"
		          :label="item.username"
		          :value="item.username"
		        />
		      </el-select>
		    </div>
		    <div class="pwd">
		      <label>请输入监护员密码</label>
		      <el-input
		        v-model="adminPwdObj.pwd"
		        size="small"
		        type="password"
		        @keydown.enter.native="operatorPwdSubmit"
		      />
		    </div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
		    <el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  custom-class="switchPatrolDialog"
		  :visible.sync="dialogVisible"
		  :close-on-press-escape="true"
		  :close-on-click-modal="true"
		  :width="`40%`"
		  :modal="false"
		  @before-close="handleDialogClose"
		>
		  <!-- 隔离刀 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'
		    "
		  >
		    <!-- 遥控 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		
		    <!-- 开关清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
		      <p slot="title" class="el-dialog__title">开关清闪</p>
		    </template>
		
		    <!-- 挂牌/摘牌 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
		      <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
		      <guapaiDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		      />
		    </template>
		
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value != 4
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		      <!-- 挂牌/摘牌 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 6
		        "
		        size="small"
		        type="primary"
		        @click="handleBrand"
		        >确 定</el-button>
		    </span>
		  </template>
		
		  <!-- 地刀 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'
		    "
		  >
		    <!--          遥控-->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		    <!-- 开关清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
		      <p slot="title" class="el-dialog__title">开关清闪</p>
		      <span>暂无内容</span>
		    </template>
		
		    <!-- 全站清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
		      <p slot="title" class="el-dialog__title">全站清闪</p>
		      <span>暂无内容</span>
		      <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
		    </template>
		    <!-- 挂牌/摘牌 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
		      <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
		      <guapaiDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		      />
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 0
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		
		      <!-- 挂牌/摘牌 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 5
		        "
		        size="small"
		        type="primary"
		        @click="handleBrand"
		        >确 定</el-button>
		    </span>
		  </template>
		
		  <!-- 断路器 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj &&
		      currentSelectMenuItemObj.type == 'duanluqi'
		    "
		  >
		    <!-- 遥控 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		    <!-- 开关清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
		      <p slot="title" class="el-dialog__title">开关清闪</p>
		      <span>确定要将{{
		          currentSelectMenuItemObj.currentObj.name
		        }}开关清闪吗？</span>
		      <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
		    </template>
		    <!-- 全站清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
		      <p slot="title" class="el-dialog__title">全站清闪</p>
		      <span>确定要将全部设备进行清闪吗？</span>
		      <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
		    </template>
		
		    <!-- 挂牌/摘牌 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
		      <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
		      <guapaiDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		      />
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value != 4
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 2
		        "
		        size="small"
		        @click="clearFlesh"
		        >确定</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 3
		        "
		        size="small"
		        @click="clearAll"
		        >确定</el-button>
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		
		      <!-- 挂牌/摘牌 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 6
		        "
		        size="small"
		        type="primary"
		        @click="handleBrand"
		        >确 定</el-button>
		    </span>
		  </template>
		
		  <!-- 把手 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'
		    "
		  >
		    <!-- 操作 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">操作</p>
		      <span>暂无内容</span>
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value != 2
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		    </span>
		  </template>
		
		  <template
		    v-if="
		      currentSelectMenuItemObj &&
		      currentSelectMenuItemObj.type == 'ruanyaban'
		    "
		  >
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 2
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		    </span>
		  </template>
		</el-dialog>
		<el-dialog
		  ref="operateRecordDialogRef"
		  custom-class="operateRecordDialog"
		  :modal="false"
		  :close-on-click-modal="false"
		  v-if="operationRecordsDialogVisible"
		  :visible.sync="operationRecordsDialogVisible"
		  v-dialogDrag:{dialogDrag}="true"
		  width="35%"
		>
		  <p slot="title" class="el-dialog__title">操作记录</p>
		  <div class="messageAlarmList">
		    <el-table :data="operationRecordsData" width="100%" height="250">
		      <el-table-column
		        prop="num"
		        label="序号"
		        width="85"
		        header-align="center"
		        align="center"
		      >
		        <template #default="{ row }">
		          <span :class="{ 'is-highlight': !!row.isHighlight }">{{
		            row.num
		          }}</span>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="createTime"
		        label="操作时间"
		        width="160"
		        header-align="center"
		        align="center"
		      >
		        <template #default="{ row }">
		          <span :class="{ 'is-highlight': !!row.isHighlight }">{{
		            row.createTime
		          }}</span>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="log_desc"
		        label="操作描述"
		        header-align="center"
		      >
		        <template #default="{ row }">
		          <span :class="{ 'is-highlight': !!row.isHighlight }">{{
		            row.log_desc
		          }}</span>
		        </template>
		      </el-table-column>
		    </el-table>
		  </div>
		</el-dialog>
	</div>
</template>

<script src="./script.js"></script>

<style lang="less" src="./style.less" scoped></style>
